<!-- @author: 任梦娇 @description： 个人信息模块 -->
<template>
    <Card :bordered="false" dis-hover class="ivu-mt">
        <Row>
            <Col :xl="{span: 12, offset: 6}" :lg="{span: 12, offset: 6}" :md="{span: 16, offset: 4}"
                 :sm="{span: 20, offset: 2}" :xs="24">
                <Form ref="form" :model="data" :rules="rules" :label-width="labelWidth" :label-position="labelPosition">

                    <!--                    <FormItem label="名片模板：" props="card_template_id" label-for="card_template_id">-->
                    <!--                        <RadioGroup v-model="data.card_template_id" element-id="card_template_id">-->
                    <!--                            <Radio label="1">模板一</Radio>-->
                    <!--                            <Radio label="2">模板二</Radio>-->
                    <!--                            <Radio label="3">模板三</Radio>-->
                    <!--                            <Radio label="4">模板四</Radio>-->
                    <!--                        </RadioGroup>-->
                    <!--                    </FormItem>-->
                    <FormItem label="姓名：" prop="realname" label-for="realname">
                        <Input v-model="data.realname" placeholder="请输入姓名" element-id="realname"/>
                    </FormItem>
                    <FormItem label="电话：" prop="mobile" label-for="mobile">
                        <Input v-model="data.mobile" placeholder="请输入电话" element-id="mobile"/>
                    </FormItem>
                    <FormItem label="职称：" prop="job_title" label-for="job_title">
                        <Input v-model="data.job_title" placeholder="请输入职称" element-id="job_title"/>
                    </FormItem>
                    <FormItem label="微信号" prop="wx_name">
                        <Select v-model="data.wx_name" placeholder="请选择微信号">
                            <Option v-for="item in data.wx_list" :key="item.id" :value="item.id">{{ item.title }}
                            </Option>
                        </Select>
                    </FormItem>
                    <FormItem label="医院：" prop="hospital" label-for="hospital">
                        <Input v-model="data.hospital" placeholder="请输入医院" element-id="hospital"/>
                    </FormItem>
                    <FormItem label="邮箱：" prop="email" label-for="email">
                        <Input v-model="data.email" placeholder="请输入邮箱" element-id="email"/>
                    </FormItem>
                    <FormItem label="备注：" props="self_introduction" label-for="self_introduction">
                        <Input v-model="data.self_introduction" type="textarea" placeholder="备注"
                               element-id="self_introduction"/>
                    </FormItem>
                    <FormItem label="上传头像：">
                        <div class="model-card">
                            <div class="card-item-1">
                                <Row class-name="row-name">
                                    <Col span="9">
                                        <div class="form-upload">
                                            <Upload class="form-upload-width" ref="upload"
                                                    :on-success="handleUploadSuccess"
                                                    :before-upload="handleBeforeUpload" :show-upload-list="false"
                                                    :headers="{'Authorization': 'Bearer ' + token}"
                                                    :action="baseUrl+'/v1/file/images'">
                                                <img :src="perAvatar" alt="">
                                                <span v-if="perAvatar === ''">+</span>
                                                <Button class="form-upload-button"
                                                        icon="ios-cloud-upload-outline"></Button>
                                            </Upload>
                                        </div>
                                    </Col>
                                    <!--                                    <Col offset="4" span="11">-->
                                    <!--                                        <div>{{data.realname}}</div>-->
                                    <!--                                        <div style="min-height: 40px">{{data.job_title}}</div>-->
                                    <!--                                        <div>电话:xxxxxxxxxxx</div>-->
                                    <!--                                        <div>微信:xxxxxxxxxxxx</div>-->
                                    <!--                                    </Col>-->
                                </Row>
                            </div>
                        </div>
                    </FormItem>
                    <FormItem label="微信二维码：">
                        <Upload ref="uploadImg" :on-success="handleUploadWeChatSuccess"
                                :headers="{'Authorization': 'Bearer ' + token}" :action="baseUrl+'/v1/file/images'">
                            <Button icon="ios-cloud-upload-outline">上传图片</Button>
                        </Upload>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" :loading="loading" @click="handleSubmit">提交</Button>
                        <Button class="ivu-ml">保存</Button>
                    </FormItem>
                </Form>
            </Col>
        </Row>
    </Card>
</template>
<script>
    import util from '@/libs/util'
    import Setting from '@/setting'
    import { askManDetail, askManUpdate } from '@/api/account.js'

    export default {
        data () {
            return {
                data: {
                    id: '',
                    // card_template_id: '1',
                    realname: '',
                    mobile: '',
                    job_title: '',
                    email: '',
                    self_introduction: '',
                    wx_qrcode: '',
                    avatar: '',
                    wx_name: '',
                    wx_list: [],
                    hospital: ''
                },
                perAvatar: '',
                token: util.cookies.get('token'),
                baseUrl: Setting.apiBaseURL,
                rules: {
                    realname: [
                        { required: true, message: '请输入姓名', trigger: 'blur' }
                    ],
                    mobile: [
                        { required: true, message: '请输入电话', trigger: 'blur' }
                    ],
                    job_title: [
                        { required: true, message: '请输入职称', trigger: 'change' }
                    ],
                    hospital: [
                        { required: true, message: '请输入医院', trigger: 'change' }
                    ],
                    wx_name: [
                        { required: true, message: '请选择微信', trigger: 'change' }
                    ],
                    email: [
                        { required: true, message: '请输入邮箱', trigger: 'change' }
                    ]
                },
                loading: false
            }
        },
        computed: {
            labelWidth () {
                return this.isMobile ? undefined : 140;
            },
            labelPosition () {
                return this.isMobile ? 'top' : 'right';
            }
        },
        mounted () {
            this.getDataDetail()
        },
        methods: {
            getDataDetail () {
                askManDetail()
                    .then((res) => {
                        this.$nextTick(() => {
                            for (let key in res) {
                                this.data[key] = res[key]
                            }
                            this.perAvatar = res.avatar
                            this.perAvatar = res.avatar_url
                        })
                    })
            },
            handleSubmit () {
                this.$refs.form.validate((valid) => {
                    this.loading = true
                    if (valid) {
                        if (this.data.avatar === '') {
                            this.loading = false
                            this.$Message.warning('请上传头像')
                        } else {
                            askManUpdate(this.data).then((res) => {
                                this.$Message.success('提交成功')
                                this.$refs['uploadImg'].clearFiles()
                            }).finally(() => {
                                this.loading = false
                            })
                        }
                    } else {
                        this.loading = false
                    }
                });
            },
            // 个人头像上传
            handleUploadSuccess (response) {
                this.data.avatar = response.data.path
            },
            // 个人微信照片上传
            handleUploadWeChatSuccess (response) {
                this.data.wx_qrcode = response.data.path
            },
            // 图片上传失败
            handleUploadError () {
                this.$Message.error('上传失败')
            },
            // 上传图片前
            handleBeforeUpload (file) {
                const reader = new FileReader()
                reader.readAsDataURL(file)
                reader.onload = () => {
                    const _base64 = reader.result
                    this.perAvatar = _base64
                }
            }
        }
    }
</script>
<style lang="less" scoped>
    .model-card {
        width: 400px;
        height: 140px;
        /*border: 1px solid #cccccc;*/

        .card-item-1 {
            width: 100%;
            height: 100%;

            .row-name {
                height: 100%;
                /*padding-top: 24px;*/
            }

            .form-upload {
                /*margin-left: 20px;*/
                cursor: pointer;

                .form-upload-width {
                    position: relative;
                    width: 100px;
                    height: 140px;
                    border: 1px solid #cccccc;

                    img {
                        position: absolute;
                        top: 0;
                        left: 0;
                        z-index: 999;
                        width: 100%;
                        height: 100%;
                    }

                    span {
                        display: inline-block;
                        font-size: 100px;
                        margin: 50px 0 0 20px;
                    }

                    .form-upload-button {
                        position: absolute;
                        top: 0;
                        left: 0;
                        z-index: 998;
                        width: 100px;
                        height: 100px;
                        opacity: 0;
                    }
                }
            }
        }
    }
</style>
